<template>
  <el-container class="layout-container-demo">
    <NavMemu :width="width" :collapse="collapse"></NavMemu>

    <el-container>
      <el-header class="header">
        <el-icon  :size="20" @click="collapse = !collapse">
          <component :is="getIcon"></component>
          <!--动态组件 -->
        </el-icon>
        {{ collapse }}
        <el-dropdown @command="quit">
          <span class="el-dropdown-link">
            你好:{{ userInfo.adminname }}
            <!-- 显示登录后的用户名 -->
            <el-icon class="el-icon--right headerIcon">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="a">关于</el-dropdown-item>
              <el-dropdown-item command="q">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <el-main>
        <el-breadcrumb separator="/">
          <!-- 动态面包屑 -->
          <el-breadcrumb-item v-for="item in names" :key="item.path">
            {{ item.meta.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <RouterView></RouterView>
        <!-- 渲染三级组件 --->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {
  Menu as IconMenu,
  Message,
  Setting,
  ArrowDown,
  Expand,
  Fold,
} from "@element-plus/icons-vue";
import { getAdminList } from "../service/admin"; // 获取管理员列表
import { ElMessage } from "element-plus"; // 消息提示框
import NavMemu from "../components/NavMenu.vue";
import { Location } from "@element-plus/icons-vue";

export default {
  components: {
    IconMenu,
    Message,
    Setting,
    ArrowDown, // 退出功能-- 下拉菜单图标
    NavMemu,
    Expand,
    Fold,
    Location,
  },
  data() {
    return {
      names: [], // 记录当前的面包屑导航的所有的name
      // 控制菜单的折叠和展开
      collapse: false, // 对于menu false  展开状态  true 折叠状态
      // aside菜单 false 折叠状态  true 展开状态
      type: 1, // 1添加功能 2编辑功能
    };
  },
  watch: {
    // watch监听当前活动的组件 （动态面包屑）
    $route: {
      handler(n) {
        // console.log(n);
        // console.log(n.matched);  // 当前匹配的路由，包括子路由
        this.names = n.matched; // 记录匹配的路由对象，包含子路由
      },
      deep: true, // 深度监听
      immediate: true, // 立即监听
    },
  },
  created() {
    // 返回token无效的解决方法
    getAdminList().then((res) => {
      console.log(res);
    });
  },
  computed: {
    // 显示登录后的用户名
    userInfo() {
      // 提取仓库里面的数据（登录用户消息）
      return this.$store.state.userInfo;
    },
    getIcon() {
      // 控制导航条展开折叠的图标  动态组件
      return this.collapse ? "Expand" : "Fold";
    },
    width() {
      //控制导航条展开折叠的图标
      return this.collapse ? "50px" : "200px";
    },
  },
  methods: {
    quit(str) {
      // 退出登录 功能
      // alert(str,'quit')
      switch (str) {
        case "a":
          ElMessage({
            message: "暂不处理",
            type: "warning",
          });
          break;
        case "q":
          localStorage.removeItem("token");
          this.$store.commit("userInfo", {});
          this.$router.push("/login");
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style>
html,
body,
#app,
.el-container,
.el-aside {
  height: 100vh;
}
.el-aside {
  background-color: #545c64;
}
.el-menu {
  border: none;
}

.header {
  background: #7f8fa6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-breadcrumb {
  margin-bottom: 20px;
}
.el-main{
  background: #d9ecff;
}
</style>
